<!-- Buttons to add to the header. -->
<core-navbar-buttons slot="end">
    @if (!courseContentsPage) {
        <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
            <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
        </ion-button>
    } @else {
        <core-context-menu>
            <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
                iconAction="fas-circle-info" />
        </core-context-menu>
    }
</core-navbar-buttons>

<!-- Content. -->
<core-loading [hideUntil]="!showLoading">

    <!-- Activity info. -->
    <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
        [courseId]="courseId" [hasDataToSync]="hasOffline" (completionChanged)="onCompletionChange()" />

    <core-tabs [hideUntil]="tabsReady" [selectedIndex]="firstSelectedTab">
        <core-tab [title]="tabs.overview.label | translate" [id]="tabs.overview.name" (ionSelect)="tabChanged(tabs.overview.name)">
            <ng-template>
                <ng-container *ngTemplateOutlet="tabOverview" />
            </ng-template>
        </core-tab>
        @if (showAnalysis && access) {
            <core-tab [id]="tabs.analysis.name" [title]="tabs.analysis.label | translate" (ionSelect)="tabChanged(tabs.analysis.name)">
                <ng-template>
                    <ng-container *ngTemplateOutlet="tabAnalysis" />
                </ng-template>
            </core-tab>
        }
    </core-tabs>

    @if (!showLoading) {
        <div collapsible-footer slot="fixed">
            @if (access && (access.canedititems || access.canviewreports || !access.isempty)) {
                <div class="list-item-limited-width adaptable-buttons-row">
                    @if (access.canedititems || access.canviewreports) {
                        <ion-button expand="block" fill="outline" (click)="gotoAnswerQuestions(true)" class="ion-margin ion-text-wrap">
                            <ion-icon name="fas-magnifying-glass" slot="start" aria-hidden="true" />
                            {{ 'addon.mod_feedback.preview' | translate }}
                        </ion-button>
                    }
                    @if (access.cancomplete && access.cansubmit && access.isopen) {
                        <ion-button expand="block" (click)="gotoAnswerQuestions()" class="ion-margin ion-text-wrap">
                            @if (!goPage) {

                                {{ 'addon.mod_feedback.complete_the_form' | translate }}

                            } @else {

                                {{ 'addon.mod_feedback.continue_the_form' | translate }}

                            }
                        </ion-button>
                    }
                </div>
            }

            <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id" />
        </div>
    }
</core-loading>

<ng-template #basicInfo>
    @if (access && access.canviewanalysis && !access.isempty) {
        @let canViewAttempts = access.canviewreports && completedCount > 0;
        @let canViewNonRespondents = !access.isanonymous && access.canviewreports;

        <ion-list>
            <core-group-selector [groupInfo]="groupInfo" [(selected)]="group" (selectedChange)="setGroup(group)" [courseId]="courseId" />

            <ion-item class="ion-text-wrap" (click)="canViewAttempts && openAttempts()" [class.hide-detail]="!canViewAttempts"
                [detail]="canViewAttempts || canViewNonRespondents" [button]="canViewAttempts">
                <ion-label>
                    <p class="item-heading">{{ 'addon.mod_feedback.completed_feedbacks' | translate }}</p>
                </ion-label>
                <ion-badge slot="end">
                    <span aria-hidden="true">{{completedCount}}</span>
                    <span class="sr-only">
                        {{ 'addon.mod_feedback.completedfeedbackscountdescription' | translate:{count: completedCount} }}
                    </span>
                </ion-badge>
            </ion-item>
            @if (canViewNonRespondents) {
                <ion-item class="ion-text-wrap" (click)="openNonRespondents()" [detail]="true" button>
                    <ion-label>
                        <p class="item-heading">{{ 'addon.mod_feedback.show_nonrespondents' | translate }}</p>
                    </ion-label>
                </ion-item>
            }
            <ion-item class="ion-text-wrap hide-detail" [detail]="canViewAttempts || canViewNonRespondents">
                <ion-label>
                    <p class="item-heading">{{ 'addon.mod_feedback.questions' | translate }}</p>
                </ion-label>
                <ion-badge slot="end">
                    <span aria-hidden="true">{{itemsCount}}</span>
                    <span class="sr-only">
                        {{ 'addon.mod_feedback.questionscountdescription' | translate:{count: itemsCount} }}
                    </span>
                </ion-badge>
            </ion-item>
        </ion-list>
    }
</ng-template>

<!-- Template to render the overview. -->
<ng-template #tabOverview>
    <core-loading [hideUntil]="tabs.overview.loaded">
        <ng-container *ngTemplateOutlet="basicInfo" />

        @if (access && access.cancomplete && !access.isopen) {
            <ion-card class="core-info-card">
                <ion-item>
                    <ion-icon name="fas-circle-question" slot="start" aria-hidden="true" />
                    <ion-label>{{ 'addon.mod_feedback.feedback_is_not_open' | translate }}</ion-label>
                </ion-item>
            </ion-card>
        }

        @if (access && access.cancomplete && access.isopen && !access.cansubmit) {
            <ion-card class="core-success-card">
                <ion-item>
                    <ion-icon name="fas-check" slot="start" aria-hidden="true" />
                    <ion-label>{{ 'addon.mod_feedback.this_feedback_is_already_submitted' | translate }}</ion-label>
                </ion-item>
            </ion-card>
        }

        @if (access && (access.canedititems || access.canviewreports || !access.isempty)) {
            <ion-list>
                @if (access.canedititems && overview.timeopen) {
                    <ion-item class="ion-text-wrap">
                        <ion-label>
                            <p class="item-heading">{{ 'addon.mod_feedback.feedbackopen' | translate }}</p>
                            <p>{{overview.openTimeReadable}}</p>
                        </ion-label>
                    </ion-item>
                }
                @if (access.canedititems && overview.timeclose) {
                    <ion-item class="ion-text-wrap">
                        <ion-label>
                            <p class="item-heading">{{ 'addon.mod_feedback.feedbackclose' | translate }}</p>
                            <p>{{overview.closeTimeReadable}}</p>
                        </ion-label>
                    </ion-item>
                }
                @if (access.canedititems && feedback && feedback.page_after_submit) {
                    <ion-item class="ion-text-wrap">
                        <ion-label>
                            <p class="item-heading">{{ 'addon.mod_feedback.page_after_submit' | translate }}</p>
                            <core-format-text [component]="component" [componentId]="componentId" [text]="feedback.page_after_submit"
                                contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
                        </ion-label>
                    </ion-item>
                }
                @if (!access.isempty) {

                    <ion-item class="ion-text-wrap">
                        <ion-label>
                            <p class="item-heading">{{ 'addon.mod_feedback.mode' | translate }}</p>
                            @if (access.isanonymous) {
                                <p>{{ 'addon.mod_feedback.anonymous' | translate }}</p>
                            } @else {
                                <p>{{ 'addon.mod_feedback.non_anonymous' | translate }}</p>
                            }
                        </ion-label>
                    </ion-item>

                }
            </ion-list>
        }
    </core-loading>
</ng-template>

<!-- Template to render the analysis. -->
<ng-template #tabAnalysis>
    <core-loading [hideUntil]="tabs.analysis.loaded">
        <ng-container *ngTemplateOutlet="basicInfo" />

        @if (access && (access.canedititems || !access.isempty)) {

            @if (warning) {
                <ion-card class="core-info-card">
                    <ion-item>
                        <ion-icon name="fas-circle-question" slot="start" aria-hidden="true" />
                        <ion-label>{{ warning }}</ion-label>
                    </ion-item>
                </ion-card>
            }

            @if (items && items.length) {
                <ion-list>
                    <ion-item class="ion-text-wrap core-analysis" *ngFor="let item of items">
                        <ion-label>
                            <p class="item-heading">
                                {{item.num}}.
                                <core-format-text [component]="component" [componentId]="componentId" [text]="item.name"
                                    contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
                            </p>
                            <p>
                                <core-format-text [component]="component" [componentId]="componentId" [text]="item.label"
                                    contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
                            </p>
                            @switch (item.templateName) {
                                @case ('numeric') {
                                    <ul>
                                        <li *ngFor="let data of item.data">{{ data }}</li>
                                    </ul>
                                    <p>{{ 'addon.mod_feedback.average' | translate }}: {{item.average | number : '1.2-2'}}</p>
                                }
                                @case ('list') {
                                    <ul>
                                        <ng-container *ngFor="let data of item.data">
                                            @if (data) {
                                                <li>{{ data }}</li>
                                            }
                                        </ng-container>
                                    </ul>
                                }
                                @case ('chart') {
                                    <core-chart [type]="item.chartType" [data]="item.chartData" [labels]="item.labels" height="300"
                                        contextLevel="module" [contextInstanceId]="module.id" [wsNotFiltered]="true"
                                        [courseId]="courseId" />
                                    @if (item.average) {
                                        <p>
                                            {{ 'addon.mod_feedback.average' | translate }}: {{item.average | number : '1.2-2'}}
                                        </p>
                                    }
                                }
                            }
                        </ion-label>
                    </ion-item>
                </ion-list>
            }

        }
    </core-loading>
</ng-template>
